<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.18 slot 插槽 </title>

	<style>
		input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		}



		.panel {
			max-width: 300px;
			border: 1px solid #999;
			margin-bottom: 15px;
			overflow: hidden;
		}

		.panel>* {
			/* pandding 下的子元素 padding值 设置 */
			padding: 15px;
		}

		.panel .title {
			font-size: 25px;
			font-weight: bold;
			border-bottom: 1px solid #444;
		}

		.panel .content {

			line-height: 1.5;


		}

		.panel .footer {

			border-top: 1px solid #444;
			/* font-size: n; */
			font-size: medium;
			color: #999;
		}
	</style>

</head>
<!-- 
	官方文档 
	fitler 过滤器
	https://cn.vuejs.org/v2/guide/filters.html

	directive 指令
	https://cn.vuejs.org/v2/guide/custom-directive.html

 -->

<body>


	<div id="app">

		<panel>
			<div slot="title"> How are you today?</div>
			<div slot="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequuntur quod aliquid
				excepturi reprehenderit accusamus labore fuga hic ullam nemo ad repudiandae rem modi est quasi, cum
				assumenda consequatur nostrum.</div>
		</panel>


		<panel>
			<div slot="title"> 依赖抽象</div>
			<div slot="content"> DIP 原则 一个简单的解释 “依赖于抽象” 就是不应该依赖于 具体的类，也就是说 程序中所有的依赖关系都应该是抽象类 或者接口 。

				DIP 还可以简单理解成要依赖于抽象，由此，还可以推导出一些指导编码的规则：

				任何变量都不应该指向一个具体类；
				任何类都不应继承自具体类；
				任何方法都不应该覆写父类中已经实现的方法。
				————————————————
				版权声明：本文为CSDN博主「阿常呓语」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
				原文链接：https://blog.csdn.net/u010339879/article/details/123033107
			</div>
			<div slot="footer"> 更多信息</div>
		</panel>

	</div>


	<template id="panel-tpl">

		<div class="panel">
			<div class="title">
				<slot name="title"></slot>
			</div>
			<div class="content">
				<slot name="content"></slot>
			</div>
			<div class="footer">
				<slot name="footer">more ... </slot>
			</div>
		</div>


	</template>




	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>